<template>
<div class="f-header">
  <span class="logo">
    <el-icon class="mr-1"><ElementPlus /></el-icon>
    雏鹰网路管理后台 
  </span>
  <el-icon class="icon-btn" @click="$store.commit('handelAsideWidth')">
    <Fold v-if="$store.state.asideWidth == '250px'" />
    <Expand v-else />
  </el-icon>
  <el-tooltip effect="dark" content="刷新" placement="bottom" >
    <el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
  </el-tooltip>
  <div class="ml-auto flex items-center">
    
    <el-tooltip effect="dark" content="全屏" placement="bottom" >
      <el-icon class="icon-btn" @click="toggle"><FullScreen v-if="!isFullscreen" /><Aim v-else /></el-icon>
    </el-tooltip>
    <p class="ml-2 ttl"><a href="/">返回首页</a></p>
    <el-dropdown class="dropdown" @command="handleCommand">
      <span class="flex items-center text-light-50">
        <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
        {{ $store.state.user.username }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</div>
<form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
  <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" size="small">
      <el-form-item label="新密码：" prop="new_password">
        <el-input type="password" show-password v-model="form.new_password" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="new_password_confirm">
        <el-input type="password" show-password v-model="form.new_password_confirm" placeholder="请输入确认密码"></el-input>
      </el-form-item>
    </el-form>
</form-drawer>
  

</template>

<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { useFullscreen } from '@vueuse/core'
import { useRepassword,useLogout } from '~/composables/useManager'

const { isFullscreen, toggle } = useFullscreen() //{ 是否全屏状态  ,切换全屏状态}
const {
    formDrawerRef,form,rules,formRef,onSubmit,openRePasswordForm
} = useRepassword()
const { handlogout } = useLogout()

//监听事件
const handleCommand =(c)=>{
  console.log(c);
  switch(c){
    case "logout":
      handlogout()
      break;
    case "rePassword":
      //showDrawer.value = true
      //formDrawerRef.value.open()
      openRePasswordForm()
      break;
  }
}

//刷新事件方法
const handleRefresh =()=>location.reload()//location.reload()(原生js刷新方法)





</script>

<style lang='scss'>
.f-header {
  @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0 ;
  height: 64px;
  z-index: 1000;
  .logo {
    width: 250px;
    @apply flex justify-center items-center text-xl font-thin;
  }
  .icon-btn {
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
  }
  .icon-btn:hover {
    @apply bg-indigo-600
  }
  .dropdown {
    height: 64px;
    cursor: pointer;
    @apply flex items-center justify-center  mx-10;
  }
}
.ttl a {
  height: 64px;
  line-height: 64px;
  display: block;
  padding: 0 10px;
}
.ttl a:hover {
  @apply bg-indigo-600
  cursor: pointer;
}
</style>